<template>
        <div>
            状态：
        <el-select clearable v-model="kami.category" @change="(val:number)=>seaGood(val)" class="m-2" placeholder="切换状态" size="large" style="margin-right:50px;">
            <el-option v-for="item in mon" :key="item.names" :label="item.names" :value="item.id" />
        </el-select>
    </div>
    <div>
    <el-table :data="showOrders" style="width: 100%"  v-loading="loading">
    <el-table-column prop="name" label="用户名字" width="100" />
    <el-table-column prop="tel" label="用户电话" width="120" />
    <el-table-column prop="proname" label="商品名称" width="200"/>
    <el-table-column prop="address" label="地址" width="200" />
    <el-table-column prop="originprice" label="原价" width="120" />
    <el-table-column prop="discount" label="折扣" width="80" />
    <el-table-column prop="num" label="数量" width="100" />
    <el-table-column  label="订单状态" width="140" v-if="crud.charAt(2)==='1'">
        <template #default="scope">
            <el-radio-group v-model="scope.row.status">
    <el-radio :label="0" @change="changes(0,scope.row.orderid)">{{ mon[0].names }}</el-radio>
    <el-radio :label="1" @change="changes(1,scope.row.orderid)">{{ mon[1].names }}</el-radio>
    <el-radio :label="2" @change="changes(2,scope.row.orderid)">{{ mon[2].names }}</el-radio>
    <el-radio :label="3" @change="changes(3,scope.row.orderid)">{{ mon[3].names }}</el-radio>
    <el-radio :label="4" @change="changes(4,scope.row.orderid)">{{ mon[4].names }}</el-radio>
  </el-radio-group>
            </template>
    </el-table-column>>
        <el-table-column prop="sum" label="应付款" width="100" />
  </el-table>
  <el-pagination background :page-size="params.limitNum" layout="prev, pager, next" :total="total" @current-change="ichange"/>
</div>
</template>
<script setup lang="ts">
import { reactive,ref } from 'vue';
import service from '../../../until/service';
import { ElMessage } from 'element-plus'
import 'element-plus/dist/index.css';
import {useRoute} from "vue-router";
import {useRouteStore} from "../../../piniaStore/index"
const routeStore = useRouteStore();
const loading = ref(routeStore.loading)
const $route = useRoute();
const crud:string = ($route.meta.crud as string);

interface Order{
    name:string,
    tel:string,
    province:string,
    city:string,
    country:string,
    addressDetail:string,
    orderid:string,
    status:string,
    proname:string,
    originprice:number,
    discount:string,
    num:number,
    sum:number,
    address:string
}
const mon = reactive([
    {
    id:0,
    names:'未支付'
},
{
    id:1,
    names:'待发货'
},    {
    id:2,
    names:'待收货'
},    {
    id:3,
    names:'待评价'
},
{
    id:4,
    names:'已完成'
},
])
const params = reactive<{
    count:number,
    limitNum:number
}>({
    count:1,
    limitNum:10
})
const kami = reactive<{
    category: string,
}>({
    category: '',
})
const flag = ref(false)
const showOrders = reactive<Order[]>([])
    const total = ref(0)
const bich = ()=>{
    loading.value = true
    service({
    url:'/order/list',
}).then(res=>{
    if(res.data.code === '200'){
    loading.value = false
    console.log(loading.value)
        total.value= res.data.data.length
        console.log(total.value)
        showOrders.length = 0
        // showOrders.push(...res.data.data)
        res.data.data.forEach((element:any,index:number) => {
            if(index >= ((params.count - 1) * params.limitNum) && showOrders.length <= params.limitNum ){
                
                element.sum =Math.round(element.originprice * (element.discount / 10) *element.num) 
                // let x = element.status
                // element.status = ast(x)
                let y = element.discount
                element.discount = ((y * 10)+'%')
                if(element.province != undefined && element.city != undefined && element.country != undefined && element.addressDetail != undefined){
                element.address =element.province-element.city-element.country-element.addressDetail
            }else{
                element.address = '暂无地址'
            }
                showOrders.push(element)
            }


            
        });
    }
})
}
const seaGood = (ins:number)=>{
    if(kami.category === ''){
        console.log(kami.category)
        bich()
    }else{
    loading.value = !loading
    service({
    url:'/order/statusList',
    params:{
        status:ins
    }
}).then(res=>{
    if(res.data.code === '200'){
    loading.value = !loading
        total.value= res.data.data.length - 1
        console.log(total)
        showOrders.length = 0
        // showOrders.push(...res.data.data)
        res.data.data.forEach((element:any,index:number) => {
            if(index >= ((params.count - 1) * params.limitNum) && showOrders.length <= params.limitNum ){
                
                element.sum =Math.round(element.originprice * (element.discount / 10) *element.num) 
                // let x = element.status
                // element.status = ast(x)
                let y = element.discount
                element.discount = ((y * 10)+'%')
                if(element.province != undefined && element.city != undefined && element.country != undefined && element.addressDetail != undefined){
                element.address =element.province-element.city-element.country-element.addressDetail
            }else{
                element.address = '暂无地址'
            }
                showOrders.push(element)
            }


            
        });
    }
})
    }
}
const changes = (first:number,second:string)=>{
    console.log(first,second)
    service({
        url:'/order/updateStatus',
        params:{
            orderid:second,
            status:first
        }
    }).then(res=>{
        if(res.data.code === '200'){
            ElMessage({
                message:"修改状态成功",
                type:"success"
            })
        }
    })
}
// const ast = (k:number) =>{
// if(k == 0){
//     return '未支付'
// }else if(k == 1){
//     return '待发货'
// }else if(k == 2){
//     return '待收货'
// }else if(k == 3){
//     return '待评价'
// }else if(k == 4){
//     return '已完成'
// }
// }
bich()
const ichange=(value:number)=>{
    console.log(value)
    params.count = value
    bich()
}
</script>
<style scoped>
.example-showcase .el-loading-mask {
  z-index: 9;
}
</style>